<template>
	<ele-modal :width="850" :visible="visible" :confirm-loading="loading" title="货品详情" :body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
		<a-form
			class="margin-y-15"
			:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{
				md: { span: 17 },
				sm: { span: 20 },
				xs: { span: 24 }
			}"
		>
			<a-row :gutter="24">
				<a-col :md="24" :sm="24" :xs="24">
					<goodsDetailTable v-if="showDetail" v-model:visible="showDetail" :goods="goods" :table1="table1" :table2="table2"/>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { message, Modal } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { useRouter } from 'vue-router';
  import goodsDetailTable from '@/components/jewelry/goodsDetailTable.vue';
  import { goods_detail } from '@/api/jewelry/receipts_purchase';
  const tableRef = ref(null);
  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    goodsCode: String
  });

  const emit = defineEmits(['update:visible', 'load']);
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);

  // 提交状态
  const loading = ref(false);
  const form = reactive({
    code: '',
    goods_code: []
  });
  const showDetail = ref(true);
  const goods = ref({});
  //主石信息
  const table1 = reactive({
    loading: false,
    tableData: [
      {
        type: 1,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    tableData: [
      {
        type: 2,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });

  onMounted(() => {
    console.log('goodsCode', props.goodsCode);
    goods_detail({ goods_code: props.goodsCode })
      .then((res) => {
        goods.value = res.goods_info;
        table1.tableData = res.goods_info.master_gem;
        table2.tableData = res.goods_info.slave_gem;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  const save = () => {
    updateVisible(false);
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
